import React, { Component } from 'react';
import { grey400 } from 'material-ui/styles/colors';
import CircularProgress from 'material-ui/CircularProgress';

import Masonry from 'react-masonry-component';
import InfiniteScroll from 'react-infinite-scroller';

import CONFIG from '../../config';
import ActivityCard from '../Home/ActivityCard';
import { parseJSON, getMethod, postJsonMethod } from '../../redux/Helper';

export default class Girls extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      nextPageUrl: null,
      isInfiniteLoading: true
    }
  }
  
  componentWillMount() {
    this.initFetch();
  }

  /**
   * 初始化时加载数据
   */
  initFetch = () => {
    let url = `${CONFIG.apiHost}/api/find/girls?token=${this.props.token}`;
    fetch(url, getMethod)
    .then(parseJSON)
    .then(res => {
      if (res.next_page_url) {
        this.setState({isInfiniteLoading: true})
      }else{
        this.setState({isInfiniteLoading: false})
      }
      this.setState({
        data: res.data,
        nextPageUrl: res.next_page_url
      });
    })
  };

  /**
   * 加载动画
   */
  elementInfiniteLoad() {
    return (
      <div className="center-block" style={{width: 32}}>
        <CircularProgress 
          size={32} 
          style={{margin: 8}} 
          thickness={3} 
        /> 
      </div>
    );
  }

  /**
   * 滚动加载数据
   */
  handleInfiniteLoad = () => {
    if (this.state.nextPageUrl) {
      let arr = this.state.data;

      let request = '&token='+this.props.token;
      let url = this.state.nextPageUrl + request;

      fetch(url, getMethod)
      .then(parseJSON)
      .then(res => {
        setTimeout(() => {
          this.setState({
            nextPageUrl: res.next_page_url,
            data: arr.concat(res.data)
          });
        }, 500)
      })
    }else{
      this.setState({isInfiniteLoading: false});
    }
  };

  /**
   * 申请和取消申请活动
   */
  changeInActivity = (key, value) => {
    let arr = this.state.data;
    arr[key].is_apply_activity = value;
    
    this.setState({
      data: arr
    });
  };

  render() {
    let nullElement = (
      <div style={{width: '100%', textAlign: 'center'}}>
        <p style={{color: grey400}}>还没有活动，快去发布活动吧</p>
      </div>
    );

    let childElements = this.state.data.map((item, index) => {
      return (
        <ActivityCard
          key={index}
          find={true}
          item={item}
          index={index}
          token={this.props.token}
          userId={this.props.userId}
          pushTo={this.props.pushTo}
          color500={this.props.color500}
          changeInActivity={this.changeInActivity}
        />
      );
    });

    return (
      <div className="infinite-container">
        <InfiniteScroll
          pageStart={0}
          loadMore={this.handleInfiniteLoad.bind(this)}
          hasMore={this.state.isInfiniteLoading}
          loader={this.elementInfiniteLoad()}
          initialLoad={false}
          useWindow={true}
          threshold={20}
        >
          <Masonry
            style={{width: '100%'}}
            elementType={'div'}
          >
            {childElements}
          </Masonry>
        </InfiniteScroll>
      </div>
    );
  }
};
